Introduction

Users are already capable of signing up on the Little Lemon restaurant app by following the steps outlined in the Onboarding Flow. Once they successfully complete that phase, they are redirected to a profile screen.

In this exercise, you will implement all the UI elements that compose the profile screen.

Scenario

To keep the onboarding steps simple, Little Lemon has decided to gather some essential information from users. It reduces the frustration for users having to endure a lengthy sign-up process and increases the percentage of users that complete the sign-in process successfully.

However, there are still some other pieces of information that Little Lemon needs from its users. This guides the decision to enable all app features, such as identifying and verifying the authenticity of users with a profile picture or an active phone number for the restaurant staff to reach out directly.

Design

Use the following profile page mockup as a reference to guide you through the following steps. Bear in mind you don’t have to replicate the design as is it, and you are free to come up with any tweaks you wish, such as the position of elements and their dimensions.

Note that the following steps can be completed in any order to implement the different UI elements. So, let's get started.

Instructions

Step 1: Automatic data transfer

In this step, you’ll ensure that the Profile screen automatically populates the data filled entered in the Onboarding phase. These fields contain the following details about the user:

• First name

• Email address

Step 2: Valid phone number

Next, make sure the Phone Number text input only allows valid USA phone numbers. Note that there is an option to mask the phone number. If you decide to implement it, use the Mask Text library, which is compatible with Expo.

Step 3: Back button

Take note that the Back button in the Header remains inactive for now, since this is the only screen in the Stack.

Step 4: Profile image

For the image picker, use the ImagePicker Expo package. If the user hasn’t uploaded an image yet, use a placeholder that displays the first letter of the user’s first name and the first letter of the user’s last name, as depicted below:

Step 5: Email notification checkboxes

In this project, the email notification checkboxes are just cosmetic components that don’t trigger any behavior.

Step 6: Persist changes

The Save Changes button should persist all changes to the disk so that they are stored once the application starts up again. This involves the following values:

• Avatar image

• First name

• Last name

• Email

• Phone number

• All checkboxes

Step 7: Logging out

When selecting the Logout button, the application should clear all the data from the disk and display the Onboarding screen.

Conclusion

In this exercise, you have used a detailed mockup provided by the design team to implement all UI elements that compose the User Profile screen. This allows users to pick a profile picture, provide a phone number and select email notification preferences. Last but not least, the logout button clears all the data from storage and takes users to the initial onboarding point.